import { ChatContext } from '@/app/chat-context';
import { apiInterceptors, cancelFeedback, feedbackAdd, getFeedbackReasons } from '@/client/api';
import { getLexiconByApp, caseSave } from '@/client/api/domainThesaurus';
import { CopyOutlined, DislikeOutlined, LikeOutlined, ContainerOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { Button, Divider, Input, Popover, Tag, message,Alert } from 'antd';
import classNames from 'classnames';
import copy from 'copy-to-clipboard';
import { useSearchParams } from 'next/navigation';
import React, { useState, useContext, useEffect,useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { getInitMessage } from '@/utils'
import { useRouter } from 'next/router';

interface Tags {
  reason: string;
  reason_type: string;
}

const DislikeContent: React.FC<{
  list: Tags[];
  loading: boolean;
  feedback: (params: {
    feedback_type: string;
    reason_types?: string[] | undefined;
    remark?: string | undefined;
  }) => void;
  setFeedbackOpen: React.Dispatch<React.SetStateAction<boolean>>;
}> = ({ list, loading, feedback, setFeedbackOpen }) => {
  const { t } = useTranslation();
  const [selectedTags, setSelectedTags] = useState<Tags[]>([]);
  const [remark, setRemark] = useState('');
  

  return (
    <div className='flex flex-col'>
      <div className='flex flex-1 flex-wrap w-72'>
        {list?.map(item => {
          const isSelect = selectedTags.findIndex(tag => tag.reason_type === item.reason_type) > -1;
          return (
            <Tag
              key={item.reason_type}
              className={`text-xs text-[#525964] mb-2 p-1 px-2 rounded-md cursor-pointer ${isSelect ? 'border-[#8665FF] text-[#8665FF]' : ''}`}
              onClick={() => {
                setSelectedTags((preArr: Tags[]) => {
                  const index = preArr.findIndex(tag => tag.reason_type === item.reason_type);
                  if (index > -1) {
                    return [...preArr.slice(0, index), ...preArr.slice(index + 1)];
                  }
                  return [...preArr, item];
                });
              }}
            >
              {item.reason}
            </Tag>
          );
        })}
      </div>
      <Input.TextArea
        placeholder={t('feedback_tip')}
        className='w-64 h-20 resize-none mb-2'
        value={remark}
        onChange={e => setRemark(e.target.value.trim())}
      />
      <div className='flex gap-2 justify-end'>
        <Button
          className='w-16 h-8'
          onClick={() => {
            setFeedbackOpen(false);
          }}
        >
          取消
        </Button>
        <Button
          type='primary'
          className='min-w-16 h-8'
          onClick={async () => {
            const reason_types = selectedTags.map(item => item.reason_type);
            await feedback?.({
              feedback_type: 'unlike',
              reason_types,
              remark,
            });
          }}
          loading={loading}
        >
          确认
        </Button>
      </div>
    </div>
  );
};

const Feedback: React.FC<{ content: Record<string, any> }> = ({ content }) => {

  const { t } = useTranslation();
  const { currentDialogInfo } = useContext(ChatContext);
  const searchParams = useSearchParams();
  const chatId = searchParams?.get('id') || currentDialogInfo.conv_uid;

  const [messageApi, contextHolder] = message.useMessage();
  const [feedbackOpen, setFeedbackOpen] = useState<boolean>(false);
  const [status, setStatus] = useState<'like' | 'unlike' | 'none'>(content?.feedback?.feedback_type);
  const [list, setList] = useState<Tags[]>();
  const router = useRouter();
  // 新增：Alert 显示状态
  const [showAlert, setShowAlert] = useState(false);
  const alertTimerRef = useRef<NodeJS.Timeout | null>(null);

  // 复制回答
  const onCopyContext = async (context: any) => {
    const pureStr = context?.replace(/\trelations:.*/g, '');
    const result = copy(pureStr);
    if (result) {
      if (pureStr) {
        messageApi.open({ type: 'success', content: t('copy_success') });
      } else {
        messageApi.open({ type: 'warning', content: t('copy_nothing') });
      }
    } else {
      messageApi.open({ type: 'error', content: t('copy_failed') });
    }
  };

  // 点赞/踩
  const { run: feedback, loading } = useRequest(
    async (params: { feedback_type: string; reason_types?: string[]; remark?: string }) =>
      await apiInterceptors(
        feedbackAdd({
          conv_uid: chatId,
          message_id: content.order + '',
          feedback_type: params.feedback_type,
          reason_types: params.reason_types,
          remark: params.remark,
        }),
      ),
    {
      manual: true,
      onSuccess: data => {
        const [, res] = data;
        setStatus(res?.feedback_type);
        message.success('反馈成功');
        setFeedbackOpen(false);
      },
    },
  );

  // 反馈原因类型
  const { run: getReasonList } = useRequest(async () => await apiInterceptors(getFeedbackReasons()), {
    manual: true,
    onSuccess: data => {
      const [, res] = data;
      setList(res || []);
      if (res) {
        setFeedbackOpen(true);
      }
    },
  });

  // 取消反馈
  const { run: cancel } = useRequest(
    async () => await apiInterceptors(cancelFeedback({ conv_uid: chatId, message_id: content?.order + '' })),
    {
      manual: true,
      onSuccess: data => {
        const [, res] = data;
        if (res) {
          setStatus('none');
          message.success('操作成功');
        }
      },
    },
  );

  // 获取app绑定的领域词
  const { data: lexiconData } = useRequest(async () => {
    const [, res] = await apiInterceptors(
      getLexiconByApp({ app_code: currentDialogInfo?.app_code })
    );
    return res ?? [];
  });

  // 存为案例接口
  const saveCase = async (item)=>{
    const historyLastQa = sessionStorage.getItem('history_last_qa') ? JSON.parse(sessionStorage.getItem('history_last_qa')) : {}; //历史对话最后一组问答
    const initMessage = getInitMessage(); // 用户 当前输入 的问题
    // console.log(initMessage)
    const data = {
      name: initMessage?.message || historyLastQa?.question.context,
      lexicon_domain_id: item.id,
      desc:content.context, 
      app_code: currentDialogInfo?.app_code || ''
    }
    
    const res = await caseSave(data);
    if(res.data.success){  
      setShowAlert(true);
      // 5秒后自动关闭
      if (alertTimerRef.current) clearTimeout(alertTimerRef.current);
      alertTimerRef.current = setTimeout(() => setShowAlert(false), 5000);
    }else{
      message.error(res.data.err_msg_zh || res.data.err_msg)
    }
  }

  // 组件卸载时清理定时器
  useEffect(() => {
    return () => {
      if (alertTimerRef.current) clearTimeout(alertTimerRef.current);
    };
  }, []);

  return (
    <>
      {contextHolder}
      <div className='flex flex-1 items-center text-sm px-4'>
        <div className='flex gap-3'>
          <LikeOutlined
            className={classNames('cursor-pointer', { 'text-[#8665FF]': status === 'like' })}
            onClick={async () => {
              if (status === 'like') {
                await cancel();
                return;
              }
              await feedback({ feedback_type: 'like' });
            }}
          />
          <Popover
            placement='bottom'
            autoAdjustOverflow
            destroyTooltipOnHide={true}
            content={
              <DislikeContent
                setFeedbackOpen={setFeedbackOpen}
                feedback={feedback}
                list={list || []}
                loading={loading}
              />
            }
            trigger='click'
            open={feedbackOpen}
          >
            <DislikeOutlined
              className={classNames('cursor-pointer', {
                'text-[#8665FF]': status === 'unlike',
              })}
              onClick={async () => {
                if (status === 'unlike') {
                  await cancel();
                  return;
                }
                await getReasonList();
              }}
            />
          </Popover>
        </div>
        <Divider type='vertical' />
        <CopyOutlined className='cursor-pointer' onClick={() => onCopyContext(content.context)} />
        <Popover placement='bottom' trigger='hover' content={
          <div>
            {(lexiconData || []).length === 0 && (
              <Alert 
                message="未设置领域，无法保存案例，请先选择设置 "
                type="warning"
                showIcon
                action={
                  <Button size="small" type="link" onClick={() => router.push('construct/domainThesaurus')}>
                    领域
                  </Button>
                }              
              />
            )}
            {(lexiconData || []).map((item, idx) => (
              <div key={item.id || idx} className='text-xs text-gray-500'>
                { item.name }
                <Button type="link" 
                  onClick={() => { saveCase(item) }}>存为案例</Button>
              </div>
            ))}
          </div>
        }>
            <ContainerOutlined className='ml-3' />
        </Popover>

        { showAlert && (<Alert className="fixed bottom-10 z-50" style={{width:260,left:'45%'}}
          message="存储成功"
          type="success"
          showIcon
          action={
            <Button size="small" type="link" onClick={() => router.push('construct/domainThesaurus')}>
              去看看
            </Button>
          }
          closable
          onClose={() => setShowAlert(false)}
        />
        )}
      </div>
    </>
  );
};

export default Feedback;
